<template>
  <div>
    <el-row class="header" style="padding:10px 20px;">
      <el-col :span="18">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/worker">员工后台</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/worker">客户列表</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/worker/bossphoto">{{bossname}}</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/worker/showbossphoto">{{editdata.goods_name}}的图库</a></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding-left:20px">
      <el-col :span="4">
        <el-button class="center" type="primary" icon="el-icon-upload" plain @click="upload">上传</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="center" type="primary" icon="el-icon-picture" @click="back" plain>返回客户图库</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row style="padding-left:20px" class="center">
      <el-col :span="2">
        <div>图库名称：</div>
      </el-col>
      <el-col :span="20">
        <el-input v-model="name" placeholder="请修改客户名称">
          <template slot="prepend">{{bossname + '\-'}}</template>
          <el-button slot="append" icon="el-icon-edit" @click="eidtName"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="editdata.pics" style="width: 100%" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" border >
      <el-table-column
        type="index"
        width="100"
        label="#">
      </el-table-column>
      <el-table-column prop="pics_big_url" label="客户照片列" width="width">
        <template slot-scope="scope">
          <el-image
            style="width: 35%; height: 35%"
            :src="scope.row.pics_big_url"
            :preview-src-list="preImg"
            >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
            </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="pics_big_url" label="客户修改页面" width="width">
        <template slot-scope="scope">
          <div class="editPhoto" @click.stop="showPlant(scope.row.pics_id,scope.$index)">
            <div>
              <el-image
                :src="imgeObj[scope.row.pics_id] === '' || imgeObj[scope.row.pics_id] === undefined ?  scope.row.pics_big_url : imgeObj[scope.row.pics_id]"
                >
                <div slot="error" class="image-slot center" style="width:100%">
                  <i class="el-icon-picture-outline" style="font-size:40px"></i>
                </div>
              </el-image>
            </div>
          </div>
          <div>
            <span>修改意见：</span>
              <span>
                {{maskerObj[scope.row.pics_id] === '' ||  maskerObj[scope.row.pics_id] === undefined ?   '无' : maskerObj[scope.row.pics_id]}}
              </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        >
        <template slot-scope="scope">
          <!-- <el-button type="text">编辑</el-button> -->
          <el-button type="text" style="color:#e74c3c" @click="del(scope.row.pics_id,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="80%">
      <el-upload
      ref="upload"
      :headers="uploadHeaders"
      :action="uploadUrl"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
      multiple>
      <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="setPreviewDialog">
        <img width="100%" :src="previewPath" alt="">
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumitUpload">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 客户涂鸦展示 -->
          <el-dialog title="客户涂鸦意见" :visible.sync="showPlantDialog" @close="handleClosePlant" width="60%">
            <div class="showEditPhoto" style="width:100%">
              <div class="center">
                <el-image class="editPlant" :src="showPlantData.planturl === '' || showPlantData.planturl === undefined ?  showPlantData.bigurl : showPlantData.planturl">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
            </div>
          </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      showPlantDialog: false,
      plantIndex: '',
      bossname: '',
      editdata: {},
      name: '',
      isSess: true,
      // 弹框
      dialogVisible: false,
      // 上传图片数据
      dialogImageUrl: '',
      // 上传图片的Url地址
      // uploadUrl: 'http://0.0.0.0:8889/api/private/v1/upload',
      uploadUrl: '',
      // 文件上传的请求头
      uploadHeaders: { authorization: window.sessionStorage.getItem('token') },
      // 阅览图片的完整路径值
      previewPath: '',
      // 图片阅览框的显示
      setPreviewDialog: false,
      // 修改意见
      editMasker: [],
      // 图片涂鸦数据
      editPlant: [],
      // 客户id
      bossId: '',
      // 展示涂鸦数据
      showPlantData: {
        bigurl: '',
        planturl: ''
      },
      // 意见数组
      masker: [],
      // 涂鸦数组
      imgPlant: [],
      // 大图预览
      preImg: [],
      urls: [],
      imgeObj: {},
      maskerObj: {}

    }
  },
  mounted() {
    this.uploadUrl = `${this.$ip}:8889/api/private/v1/upload`
    var urlData = this.$route.query
    this.bossname = urlData.bossname
    this.bossId = urlData.id
    this.getData()
  },
  methods: {

    handleClosePlant() {
      this.showPlantData = {
        bigurl: '',
        planturl: ''
      }
    },
    showPlant(id, index) {
      // console.log(this.editdata.pics[index].pics_big_url, '=====datadatat')
      this.showPlantData.bigurl = this.editdata.pics[index].pics_big_url
      this.showPlantData.planturl = this.imgeObj[id]
      console.log(this.showPlantData.planturl)
      // console.log(this.showPlantData, '======dataPlant')
      this.showPlantDialog = true
    },
    // 处理移除图片的操作
    // file 移除的图片的信息
    handleRemove(file) {
      const index = this.editdata.pics.findIndex(x => x.pic === file.response.data.tmp_path)
      // 从pics数组中获取对应的图片的索引值
      this.editdata.pics.splice(index, 1)
    },
    // 处理图片的预览效果
    handlePreview(file) {
      // console.log(file, '=====‰处理后的照片')
      this.setPreviewDialog = true
      this.previewPath = file.response.data.url
    },
    // 图片上传成功后的处理函数
    // response 上传成功后返回的数据
    async uploadSuccess(response) {
      // console.log(response, '====成功后返回的数据')
      const picPath = { pic: response.data.tmp_path }
      // 增加图片
      this.editdata.pics.unshift(picPath)
      // 增加修改意见
      this.editMasker.unshift({
        masker: ''
      })
      // 增加涂鸦数据
      this.editPlant.unshift({
        plantData: ''
      })
      this.editdata.goods_big_logo = JSON.stringify(JSON.stringify(this.editMasker))
      this.editdata.goods_small_logo = JSON.stringify(JSON.stringify(this.editPlant))
      // console.log(this.editdata, '=====更新数据')
      const { data } = await this.$http.put(`goods/${this.editdata.goods_id}`, this.editdata)
      // console.log(data, '====更新后返回的数据')
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg)
      this.isSess = false
      this.getData()
      // console.log(this.editdata.pics, '图片数据')
    },
    // 确认图片上传
    async sumitUpload() {
      const { data: uploadData } = await this.$http.put(`goods/${this.editdata.goods_id}/pics`, this.editdata.pics)
      if (uploadData.meta.status !== 200) return this.$$message.error('图片上传失败')
      console.log(uploadData.data, '=====上传数据')
      // console.log(this.editMasker, '备注数据')
      // console.log(this.editPlant, '涂鸦数据')
      for (var i in uploadData.data.pics) {
        this.editMasker[i].id = uploadData.data.pics[i].pics_id
      }
      for (var j in uploadData.data.pics) {
        this.editPlant[j].id = uploadData.data.pics[j].pics_id
      }
      // console.log(this.editMasker, '备注数据')
      // console.log(this.editPlant, '涂鸦数据')
      this.editdata.goods_big_logo = JSON.stringify(JSON.stringify(this.editMasker))
      this.editdata.goods_small_logo = JSON.stringify(JSON.stringify(this.editPlant))
      this.name = this.bossname + '-' + this.name
      this.editdata.goods_name = this.name
      // this.editData.goods_weight = this.editData.pics.length
      const { data } = await this.$http.put(`goods/${this.editdata.goods_id}`, this.editdata)
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg)
      this.$message.success('图片更新成功')
      this.$refs.upload.clearFiles()
      this.isSess = false
      this.getData()
      this.dialogVisible = false
    },
    // 上传
    upload() {
      this.dialogVisible = true
    },
    // 删除
    async del(id, index) {
      const result = await this.$confirm('您确认要删除该图片？', '提示', {
        type: 'error',
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      }).catch(err => err)
      if (result === 'cancel') return this.$message.info('取消删除此图片')
      this.editdata.pics.splice(index, 1)
      var mindex
      var pindex
      this.editMasker.forEach((e, index) => {
        if (e.id.toString() === id.toString()) {
          mindex = index
        }
      })
      this.editPlant.forEach((e, index) => {
        if (e.id.toString() === id.toString()) {
          pindex = index
        }
      })
      this.editMasker.splice(mindex, 1)
      this.editPlant.splice(pindex, 1)
      this.editdata.goods_big_logo = JSON.stringify(JSON.stringify(this.editMasker))
      this.editdata.goods_small_logo = JSON.stringify(JSON.stringify(this.editPlant))
      this.name = this.bossname + '-' + this.name
      this.editdata.goods_name = this.name
      const { data } = await this.$http.put(`goods/${this.editdata.goods_id}`, this.editdata)
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg)
      this.isSess = false
      this.getData()
      this.$message.success('删除照片成功')
    },
    // 修改图库名称
    async eidtName() {
      this.name = this.bossname + '-' + this.name
      this.editdata.goods_name = this.name
      // this.editData.goods_weight = this.editData.pics.length
      // console.log(this.editdata, '====新图库名称的数据')
      const { data } = await this.$http.put(`goods/${this.editdata.goods_id}`, this.editdata)
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg)
      // 修改成功后
      this.isSess = false
      this.$message.success('修改图库信息成功')
      this.getData()
      // this.editdata.goods_name = this.getCaption(this.editdata.goods_name)
      // this.name = this.editdata.goods_name
    },
    // 截取字符串
    getCaption(obj) {
      var index = obj.lastIndexOf('-')
      obj = obj.substring(index + 1, obj.length)
      //  console.log(obj);
      return obj
    },
    // 获取数据
    async getData() {
      const { data: res } = await this.$http.get(`goods/${this.bossId}`)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.urls = res.data.pics
      this.editdata = res.data
      // 把照片加进大图预览数组
      for (var l in this.urls) {
        this.preImg.push(this.urls[l].pics_big_url)
        // console.log(this.preImg)
      }
      // 数据处理
      this.editdata.goods_name = this.getCaption(this.editdata.goods_name)
      this.name = this.editdata.goods_name
      if (res.data.goods_big_logo === null) {
        for (var i in this.editdata.pics) {
          console.warn(i)
          var maskerObj = {
            masker: '',
            id: this.editdata.pics[i].pics_id
          }
          this.masker.push(maskerObj)
        }
        const maskerJson = JSON.stringify(JSON.stringify(this.masker))
        this.editdata.goods_big_logo = maskerJson
        this.editdata.goods_name = this.bossname + '-' + this.editdata.goods_name
        const { data: editData } = await this.$http.put(`goods/${this.bossId}`, this.editdata)
        if (editData.meta.status !== 200) return this.$message.error('数据获取失败')
      }
      // 没有信息的时候
      if (res.data.goods_small_logo === null) {
        for (var j in this.editdata.pics) {
          console.warn(j)
          var plantObj = {
            plantData: '',
            id: this.editdata.pics[j].pics_id
          }
          this.imgPlant.push(plantObj)
        }
        const imgPlantJson = JSON.stringify(JSON.stringify(this.imgPlant))
        this.editdata.goods_small_logo = imgPlantJson
        const { data: editData } = await this.$http.put(`goods/${this.bossId}`, this.editdata)
        if (editData.meta.status !== 200) return this.$message.error('数据获取失败')
      }
      // 有信心没有id的时候
      this.editMasker = JSON.parse(JSON.parse(this.editdata.goods_big_logo))
      this.editMasker.forEach(e => {
        if (!this.maskerObj[e.id]) {
          this.$set(this.maskerObj, [e.id], {})
        }
        this.maskerObj[e.id] = e.masker
      })
      // 图片涂鸦数据
      this.editPlant = JSON.parse(JSON.parse(this.editdata.goods_small_logo))
      this.editPlant.forEach(e => {
        if (!this.imgeObj[e.id]) {
          this.$set(this.imgeObj, [e.id], {})
        }
        this.imgeObj[e.id] = e.plantData
      })
      // console.log(this.imgeObj, this.maskerObj, '=fsfdsgdfsgdfsg')
    },
    // 返回图库
    back() {
      window.sessionStorage.removeItem('bossid')
      this.$router.push(`/worker/bossphoto?bossListusername=${this.bossname}`)
    }
  }
}
</script>
<style lang="less" scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .editPhoto{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .showEditPhoto{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .showEditPhoto > div{
    width:100%;
    position: relative;
  }
  .editPhoto > div{
    width:30%;
  }
</style>
